<template>

 <div class="first">
  <div class="left">
    <ul>
      <li v-for="item in arr" :key="item.id"><router-link :to="item.path">{{item.name}}</router-link></li>
    </ul>
  </div>
  <div class="right"><router-view></router-view></div>
 </div>
</template>
<script>
export default{
    name:'',
    data () {
        return {
          arr:[
            {id:1,name:'周1',path:'/monday'},
            {id:2,name:'周2',path:'/tuesday'},
            {id:3,name:'周3',path:'/wednesday'},
            ]
            
        }
    },
    created () {
    },
    computed:{
    },
    methods:{
    }
}
</script>
<style lang='less'  scoped>

.first{
  
  display:flex;
  height: 100%;
  .left{
    width: 100px;
    height: 100%;
    background-color: white;
    margin: 0 auto;
    li{
      text-align: center;
      padding: 10px; border-bottom: 1px solid #000;
    }
  }
  .right{
    flex:1;
    height: 100%;
    background-color: orange;
  }
}
    
</style>
